<template>
  <div class="video-box" style="width: 100%; height: 100%" :id="id">
    <!-- <div class="video-box-content"  v-if="!videoUrl">暂无视频资源</div> -->
  </div>
</template>
<script setup lang="ts">
import Artplayer from "artplayer";
const props = defineProps({
  id: {
    //盒子id
    type: String,
    required: true
  },
  videoUrl: {
    type: String,
    default: () =>
    ""
      // "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
  },
  poster: {
    //海报
    type: String,
    default: () => ""
  },
  name: {
    //监控名称
    type: String,
    default: () => ""
  },
  status: {
    type: String,
    default: () => ""
  },
  isautoplay: {
    //自动播放
    type: Boolean,
    default: true
  },
  isLive: {
    //直播模式
    type: Boolean,
    default: true
  },
  autoSize: {
    //控制适配
    type: Boolean,
    default: true
  }
});

watch(
  () => props.videoUrl,
  newUrl => {
    // if (player.value !== null) {
    //   player.value.destroy();
    //   player.value = null;
    // }
    // setTimeout(() => {
    //   initPlayer();
    // }, 500);
  },
  {
    deep: true
  }
);

onMounted(() => {
  setTimeout(() => {
    if (props.id && props.autoSize) {
      document.getElementById(props.id).style.aspectRatio = "16/9";
    }
    initPlayer();
  }, 500);
});
const player = ref(null);
const initPlayer = () => {
  player.value = new Artplayer({
    poster: props.poster,//海报
    container: "#" + props.id, //盒子
    muted: true, //播放暂停
    isLive: props.isLive, //直播模式
    url: props.videoUrl,
    fullscreen: true,
    // controlsList: ["nodownload"], //关闭控制条
    autoplay: props.isautoplay, //是否自动播放
    autoSize: props.autoSize, //是否适应盒子
  });
  player.value.contextmenu.show = false;
};
onBeforeUnmount(() => {
  if (player.value || player.value !== null) {
    player.value.destroy();
    player.value = null;
  }
});
</script>
<style scoped>
.video-box-content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
  background-color: #000;
  aspect-ratio: 16/9;
}
</style>
